<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script type="importmap">
    {
        "imports": {
            "three": "../node_modules/three/build/three.module.js"
        }
    }
</script>
  <script type="module">

    import * as THREE from "../node_modules/three/build/three.module.js"
    import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js"

    //#region 创建场景
    const scane = new THREE.Scene()
    // #endregion

    //#region 创建相机
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    // 设置相机位置
    camera.position.set(0, 20, 20)
    // 设置相机朝向
    camera.lookAt(0, 0, 0);
    // #endregion

    //#region 创建渲染器
    const renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // #endregion

    // #region 轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
    controls.addEventListener('change', () => {
      // console.log(camera.position);
      renderer.render(scane, camera)
    })
    // #endregion

    //#region 添加辅助工具
    const gridHeliper = new THREE.GridHelper(100, 10, 0xff11ff)
    // #endregion

    // #region 设置光源
    // 环境光
    const ambientLight = new THREE.AmbientLight(0xff0000, 1)
    // 平行光
    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(5, 5, 0)
    // 模拟平行光 ：平行光辅助对象
    const DirectionalLightHelper = new THREE.DirectionalLightHelper(directionalLight)
    // 半球光
    const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 1)
    // 模拟半球光 ：半球光辅助对象
    const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 5)
    // 点光源
    const pointLight = new THREE.PointLight(0xff0000, 1, 100);
    pointLight.position.set(0, 5, 0)
    // 点光源辅助对象
    const pointLightHelper = new THREE.PointLightHelper(pointLight, 1);
    // #endregion

    // #region 创建纹理加载器
    const textureLoader = new THREE.TextureLoader();
    const floor = textureLoader.load("../image/4.jpg")
    const aoTexture = textureLoader.load("../image/1.jpg")
    const heightTexture = textureLoader.load("../image/3.png")
    const normalTexture = textureLoader.load("../image/2.png")
    const roughnessTexture = textureLoader.load("../image/1.jpg")

    const plane = new THREE.Mesh(
      new THREE.PlaneGeometry(10, 10),
      new THREE.MeshStandardMaterial({
        map: floor,
        aoMap: aoTexture,
        roughness: roughnessTexture,
        displacementMap: heightTexture,
        // normalMap:normalTexture
      })
    )
    plane.rotation.x = -Math.PI / 2
    scane.add(plane);
    // #endregion

    //#region 创建物体

    //#region 创建几何体
    // 圆锥体
    const gemotry = new THREE.ConeGeometry(5, 20, 32);

    // 平面缓冲几何体
    // params: width宽, height高, widthSegments横轴方向分段数, heightSegments纵轴方向分段数
    // const gemotry1 = new THREE.PlaneGeometry(5, 5);
    const gemotry1 = new THREE.BufferGeometry();
    // Float32Array 类型化数组
    const vertices = new Float32Array([
      -1.0, -1.0, 1.0,
      1.0, -1.0, 1.0,
      1.0, 1.0, 1.0,
      1.0, 1.0, 1.0,
      -1.0, 1.0, 1.0,
      -1.0, -1.0, 1.0,
    ])
    const colors = new Float32Array([
      1.0, 0.0, 0.0,
      0.0, 1.0, 0.0,
      0.0, 0.0, 1.0,
      1.0, 0.0, 0.0,
      0.0, 1.0, 0.0,
      0.0, 0.0, 1.0,
    ])
    gemotry1.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
    gemotry1.setAttribute('color', new THREE.BufferAttribute(colors, 3))

    // 正方体
    const gemotry2 = new THREE.BoxGeometry(2, 2, 2);

    // 球体
    const gemotry3 = new THREE.SphereGeometry(1, 32, 32);

    // 圆环
    const gemotry4 = new THREE.TorusGeometry(1, 0.5)

    // 纹理加载器
    const loader = new THREE.TextureLoader();
    const texture = loader.load("../image/Snipaste_2024-03-22_17-00-18.png", () => {
      renderer.render(scane, camera)
    })


    // #endregion

    //#region 创建材质
    // 基础材质
    // const material = new THREE.MeshBasicMaterial({
    //   // color: 0xff11ff,
    //   color: 0xff000,
    //   map: texture,
    //   // 开启顶点颜色
    //   // vertexColors: true,
    //   // 线框模式
    //   // wireframe: true
    // })
    // 标准材质
    const material = new THREE.MeshStandardMaterial({
      // color: 0xff0000,
      // 自发光色
      // emissive: 0xff0000,
      // 粗糙度
      // roughness: 0.5,
      // 金属度
      // metalness: 1,
    })

    // #endregion

    //#region 创建物体
    // 圆锥体
    const mesh = new THREE.Mesh(
      gemotry, material
    )
    // 平面缓冲几何体
    const mesh1 = new THREE.Mesh(
      gemotry1, material
    )
    // 创建正方体
    const mesh2 = new THREE.Mesh(gemotry2, material);
    mesh2.position.set(0, 2, 0)
    // 创建球体
    const mesh3 = new THREE.Mesh(gemotry3, material);
    mesh3.position.set(-3, 2, 0)
    // 创建圆环
    const mesh4 = new THREE.Mesh(gemotry4, material);
    mesh4.position.set(3, 2, 0)
    // #endregion
    // #endregion

    //#region 向场景中添加物体
    // 添加圆锥
    // scane.add(mesh);
    // 添加平面
    // scane.add(mesh1);
    // 添加正方体
    scane.add(mesh2)
    // 添加球体
    scane.add(mesh3)
    // 添加圆环
    scane.add(mesh4)
    scane.add(mesh3)
    // 添加光源
    // 环境光
    // scane.add(ambientLight)
    // 平行光
    // scane.add(directionalLight)
    // 平行光辅助对象
    // scane.add(DirectionalLightHelper)
    // 添加半球光
    // scane.add(hemisphereLight)
    // 添加点光源
    scane.add(pointLight)
    // 添加点光源辅助对象
    scane.add(pointLightHelper)
    // 添加半球光辅助对象
    // scane.add(hemisphereLightHelper)
    // 添加辅助工具
    // scane.add(gridHeliper)
    // #endregion

    //初始化渲染
    renderer.render(scane, camera)

    //#region 动画函数
    function animate() {
      requestAnimationFrame(animate)
      controls.update()
      // renderer.render(scane, camera)
      // camera.lookAt(0, 0, 0);
    }
    animate()
    // #endregion

  </script>
</body>

</html>